<template>
  <div class="qrDialog">
    <!-- 弹窗组件 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="250px">
      <div ref="qrCodeUrl" class="qrcode"/>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'QrDialog',
  mixins: [mySetting],
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      filePath: '',
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    openDialog(val) {
      this.dialogVisible = true
      this.filePath = val
      if (val.startsWith('apis')) {
        this.filePath = window.location.origin + '/' + val
      }
      this.$nextTick(() => {
        this.creatQrCode()
      })
    },
    creatQrCode() {
      new QRCode(this.$refs.qrCodeUrl, {
        text: this.filePath,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
      this.$refs.qrCodeUrl.innerHTML = null
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
